import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { removeRedux } from './store';
import './styles/app.scss';

function App(): JSX.Element {
  const { count }: any = useSelector(state => state);
  const dispatch = useDispatch();

  return (
    <div>
      {count}
      <br />
      <div>
        <button
          onClick={() => {
            dispatch({ type: 'INCREMENT' });
          }}
        >按钮+</button>
        <button
          onClick={() => {
            dispatch({ type: 'DECREMENT' });
          }}
        >按钮-</button>

        <span>点击按钮 + - 之后1秒，会将数据储存，刷新也不会丢失</span>
      </div>
      <button
        onClick={() => removeRedux()}
      >remove store</button>
    </div>
  )
}

export default App
